<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">系统管理</a></el-breadcrumb-item>
      <el-breadcrumb-item><a href="#">入库登记</a></el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片-->
    <el-card class="box-card">


      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="申请人:" label-width="110px">
          <el-input v-model="formInline.username" placeholder="请输入申请人名称"></el-input>
        </el-form-item>
        <el-form-item label="审批人:" label-width="110px">
          <el-input v-model="formInline.approver" placeholder="请输入审批人名称"></el-input>
        </el-form-item>

        <el-form-item style="margin-left: 10px">
          <el-button icon="el-icon-refresh" v-on:click="clearInStockInfo">重置</el-button>
          <el-button type="success" icon="el-icon-search" v-on:click="queryInStockInfoName"><a >查询</a></el-button>
          <el-button type="warning" icon="el-icon-download" ><a href="http://localhost:8090/inStock/exportInStockToExcel">导出</a></el-button>
        </el-form-item>
        <el-form-item prop="file">
          <el-upload  class="upload-demo" ref="upload" multiple accept=".xls" action="" :http-request="httpRequest" :file-list="fileList" :auto-upload="false" >
            <el-button slot="trigger"  type="primary">选取文件</el-button>
            <el-button style="margin-left:5px" type="danger" icon="el-icon-upload"  @click="submitUploadList">导入</el-button>
          </el-upload>
        </el-form-item>
      </el-form>

      <!--表格内容显示区域-->
      <el-table :data="products" border style="width:100%;height: 470px;">
        <el-table-column prop="purchaseId" label="申请单号" width="80"> </el-table-column>
        <el-table-column prop="username" label="申请人" width="110"> </el-table-column>
        <el-table-column prop="name" label="供货商" width="140"> </el-table-column>
        <el-table-column sortable prop="approver" label="审批人" width="110"> </el-table-column>
        <el-table-column sortable prop="priority" label="紧急程度" width="110">
          <template slot-scope="scope">
            {{scope.row.priority == 1 ? '不急':scope.row.priority == 2 ? '常规' :(scope.row.priority ==3 ? '紧急':'特急')}}
          </template>
        </el-table-column>
        <el-table-column sortable prop="createTime" label="申请时间" width="180"> </el-table-column>
        <el-table-column sortable prop="approvalTime" label="审批时间" width="180"> </el-table-column>
        <el-table-column prop="status" label="审核状态" width="110">
          <template slot-scope="scope">
            {{scope.row.status == 1 ? '未审核':scope.row.status == 2 ? '已通过' :(scope.row.status ==3 ? '未通过':'已处理')}}
          </template>
        </el-table-column>

        <el-table-column sortable prop="approvalDesc" label="审批描述" width="110"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope" >
            <el-button type="primary" size="mini" icon="el-icon-edit" v-on:click="InStockToLogin(scope.row)">入库登记</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination  style="padding-top: 15px"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="current"
                      :page-sizes="[6, 12, 24, 36]"
                      :page-size="pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total">
      </el-pagination>
    </el-card>
    <!--添加弹窗-->
    <el-dialog title="入库"  :visible.sync="dialogVisible" width="32%" >

      <el-form ref="form" :inline="true" :model="products" class="demo-form-inline " width="32%"  label-width="80px">
        <el-form-item label="申请号:">
          <div class="inputClass">
            <el-input v-model="products.purchaseId" readonly="true" ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="申请人:">
          <div class="inputClass">
          <el-input  v-model="products.username" readonly="true" ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="供货商:">
          <div class="inputClass">
          <el-input v-model="products.name"readonly="true"  ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="审批人:">
          <div class="inputClass">
          <el-input v-model="products.approver"readonly="true" ></el-input>
          </div>
        </el-form-item>
      </el-form>

      <el-table :data="productDetails" border  max-height="400px" style="width:89%;height:192px;left: 7%;">
        <el-table-column prop="purchaseId" label="申请单号" width="100"> </el-table-column>
        <el-table-column prop="pid" label="物资编号" width="160"> </el-table-column>
        <el-table-column prop="applyNum" label="物资数量" width="140"> </el-table-column>
      </el-table>


      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" v-on:click="addInStockInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {queryAllProductPurchaseForByPage, queryAllProductPurchaseVoForByPage} from "../../api/inStock";
  import  a from "../../views/Login"

  export default {
    name: 'InStock',
    data () {
      return {
        pageSize: 6,
        total: 1,
        total2: 1,
        current: 1,
        fileList: [],
        formInline:{
          username:'',
          approver:'',
          loadUrl:'inStock/importInStockToExcel',
        },
        inStockInfo:{
          supplierId:'',
          applyNum:'',
          pid:'',
          username:'',
          purchaseId:''
        },
        products:null,
        productDetails: null,
        dialogVisible:false,
      }
    },
    methods: {
      // 提交事件
      onSubmit () {
        console.log('submit!')
      },//导入数据
      httpRequest(param) {
        console.log(param);
        let fileObj = param.file; // 相当于input里取得的files
        let fd = new FormData(); // FormData 对象
        fd.append("file", fileObj); // 文件对象
        let url = this.loadUrl
        let config = {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        };
        this.$http.post(url, fd, config).then((res) => {
          console.log(res);
        });
      },
      //导入提交
      submitUploadList() {
        this.$refs.upload.submit();
      },
      // 当记录数发生改变时
      handleSizeChange (val) {
        this.pageSize = val;
        this.getProductPurchaseVo(this.current,this.size);
      },
      // 当前页发生改变时
      handleCurrentChange (val) {
        this.current = val;
        this.getProductPurchaseVo(this.current,this.pageSize);
      },
      //获取入库申请单数据
      async getProductPurchaseVo(){
        const { data } =await queryAllProductPurchaseForByPage (this.current,this.pageSize,)
        this.products=data.data.productPurchasePage.records;
        this.total2 = data.data.productPurchasePage.total;
        this.pageSize = data.data.productPurchasePage.size;
      },
      //获取入库申请单数据
      async getProductPurchase(){
        const { data } =await queryAllProductPurchaseVoForByPage(this.current,this.pageSize,)
        this.productDetails=data.data.productPurchaseVoPage.records;
        this.total2 = data.data.productPurchaseVoPage.total;
        this.pageSize = data.data.productPurchaseVoPage.size;
      },
      async InStockToLogin(row){
        this.products=row;
        this.dialogVisible=true;
      },
      //添加入库单信息
      async addInStockInfo(){
        let url='bizInStockInfo/insertInStockInfo'
        let productInStock= this.productDetails;
        this.$http.post(url,productInStock).then((res) => {
          console.log(res);
          this.$message({
            type: "info",
            message: "保存成功",
          });
          this.dialogVisible = false;
          this.getProductPurchaseVo(this.current,this.pageSize);
        }).catch(ex=>this.$message({
          type: "error",
          message: "保存失败",
        }));
      },
      //模糊查询入库单信息
      async queryInStockInfoName(){
        let username=this.formInline.username;
        let approver=this.formInline.approver;
        const { data } =  await queryAllProductPurchaseForByPage(1,this.pageSize,username,approver);
        this.products=data.data.productPurchasePage.records;
        this.total2 = data.data.productPurchasePage.total;
        this.pageSize = data.data.productPurchasePage.size;
      },
      //清空查询条件
      async clearInStockInfo(){
        let username=this.formInline.username='';
        let approver=this.formInline.approver='';
        this.getInStockList(this.current,this.pageSize,username,approver);
      },
    },

    // create创建完成后钩子函数
    created () {
      this.getProductPurchaseVo();
      this.getProductPurchase();
    }
  }
</script>

<style scoped>
  a {
    text-decoration: none;
    color:white;
  }
  /*正常的未被访问过的链接*/
  a:link {
    text-decoration: none;
  }
  /*已经访问过的链接*/
  a:visited {
    text-decoration: none;
  }
  /*鼠标划过(停留)的链接*/
  a:hover {
    text-decoration: none;
  }
  /* 正在点击的链接，鼠标在元素上按下还没有松开*/
  a:active {
    text-decoration: none;
  }
  /* 获得焦点的时候 鼠标松开时显示的颜色*/
  a:focus {
    text-decoration: none;
  }
  .upload-demo input{
    display: none;
  }
  .inputClass{
    width:130px;
  }
  .inputClass>>>.el-input__inner{
    border: 0px;
  }
</style>
